<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>

    <style>
        html,body{
            height: 100%;
        }
        div{

            background-color: green;
            border: 2px solid  black;
            box-sizing: border-box;
        }
        body{
            background-color: red;
        }
        /*使用媒体查询只需要是有@media即可,后面是查询的条件.
        媒体查询可以理解为查询媒体设备的信息,跟后面指定的条件进行匹配,假如匹配成功,则执行规定样式.

        max-width:最大宽度,即宽度小于或等于某一个值的时候.
        min-width:最小宽度,同理.
        max-device-width:设备屏幕最大宽度.
        */
        @media (max-width:550px){
            body{
                background-color: blue;
            }
        }
        /*aspect-ratio: 页面的宽高比
        max-aspect-ratio: 页面最大的宽高比,一般用来判断页面的方向,横竖屏方向.
        */
        @media (aspect-ratio;16:9){
            body{
                background-color: orange;
            }
        }

        @media (max-aspect-ratio:1/1){
            body{
                background-color: purple;
            }
            div{
                width: 100%;
                height: 50%;
                display: block;
            }
        }

        @media (min-aspect-ratio:1/1){
            body{
                background-color: lightblue;

                /*行内元素默认有一个间隔,要想去掉该间隔,有很多技巧,其中一个是往父元素设置:fontsize为0
                但是会产生的后果就是:子元素因为继承父元素的样式,所以子元素字体也会为0;
                这时,需要对子元素重置字号.*/
                font-size: 0;
       
            }
            div{
                width: 50%;
                height:100%;
                display: inline-block;
            }
        }
        /*screen代表是电脑屏幕,平板电脑,智能手机等.*/
        @media screen and (max-aspect-ratio:1/1){

        }
        /*orientation: 判断屏幕方向.
        landscape: 横屏.
        portrait: 竖屏.

        他和aspect-ratio是有严格的区分的.aspect-ratio只是判断窗口的宽高比.
        而orientation是真正的设备横竖屏判断,经常用于移动设备.
        */
        @media screen and (orientation:landscape){
            
        }

    </style>

</head>
<body>
    <div></div>
    <div></div>
</body>
</html>